<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="keywords" content="shopping">
  <meta name="description" content="shopping">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title>shopping</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <script src="./js/jquery-1.10.2.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/bootstrapValidator.min.js"></script>
  <link rel="stylesheet" href="./css/signup.css">
  <link rel="stylesheet" href="./css/public.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_745333_g55zsfjlolf.css">

</head>

<body>
    <!-- 注册页面头部 -->
    <div class="signup-header">
      <div class="signup-container">
        <div class="signup-logo">
          <img src="images/LOGO.png">
        </div>
      </div>
    </div>
    <!-- 注册页面 -->
    <div class="signup-center">
      <div class="signup-container">
          <div class="signup-r">
            <div class="signup-r-img"></div>
          </div>
          <div class="signup-l clearfloat">
            <h2>注册</h2>
            <p>欢迎注册成为XX商城会员，立刻开始您的购物之旅</p>
            <form class="clearfloat" method="post">
              <div class="form-group signup-username clearfloat">
                <label>用户名</label>
                <input type="text" class="form-control" name="username" autocomplete="off" placeholder="请输入您的用户名，必须在3到6个字符以内"/>
              </div>
              <div class="form-group clearfloat">
                <label>密码</label>
                <input type="password" class="form-control" name="password" placeholder="请输入密码"/>
              </div>
              <div class="form-group clearfloat">
                <label>确认密码</label>
                <input type="password" class="form-control" name="confirmPassword" placeholder="请再次确认密码"/>
              </div>
              <div class="form-group clearfloat">
                <label>手机号</label>
                <input type="text" class="form-control" name="phone" autocomplete="off" placeholder="请输入您的手机号"/>
              </div>
              <div class="form-group clearfloat">
                <label>验证码</label>
                <input type="text" class="form-control"  name="code" placeholder="请输入验证码"/>
                <a href="#0" class="getCode">获取验证码</a>
              </div>
              <p><input checked type="checkbox" name="xueyi" id="">我已阅读并同意<a href="#0">《XX商城用户协议》</a></p>
              <button  onclick="check()">注册</button>
              <p>已账号？<a href="#0">立即登录</a></p>
            </form>    
          </div>
      </div>
    </div>
    <!-- 注册页面底部 -->
    <div class="signup-footers">
        <p>&copy;&nbsp;&nbsp;&nbsp;2018  WWW.SHOPPING.COM</p>
    </div>  
</body>
<script>
  $('form').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      username: {
        message: '用户名不能为空',
        validators: {
          notEmpty: {
              message: '用户名不能为空'
          },
          stringLength: {
              min: 6,
              max: 30,
              message: '用户名必须大于6且小于30个字符'
          },
          regexp: {
              regexp: /^[a-zA-Z0-9_\.]+$/,
              message: '用户名只能由字母、数字、点和下划线组成'
          },
          // remote: {
          //     url: 'remote.php',
          //     message: 'The username is not available'
          // },
          // different: {
          //     field: 'password',
          //     message: '用户名和密码不能相同'
          // }
        }
      },
      password: {
        validators: {
          notEmpty: {
              message: '密码不能为空'
          },
          identical: {
              field: 'confirmPassword',
              message: '密码和它的确认不一样'
          },
          // different: {
          //     field: 'username',
          //     message: '密码不能与用户名相同'
          // }
        }
      },
      confirmPassword: {
        validators: {
            notEmpty: {
                message: '确认密码是必需的，不能是空的。'
            },
            identical: {
                field: 'password',
                message: '密码和它的确认不一样'
            },
            // different: {
            //     field: 'username',
            //     message: '密码不能与用户名相同'
            // }
        }
      },
      phone: {
        validators: {
            notEmpty: {
                message: '手机号码不能为空'
            },
            stringLength: {
                min: 11,
                max: 11,
                message: '请输入11位手机号码'
            },
            regexp: {
                regexp: /^1[3|5|8]{1}[0-9]{9}$/,
                message: '请输入正确的手机号码'
            }
        }
      },
      code:{
          validators: {
            notEmpty: {
                message: '验证码不能为空'
            },
        }
      }
    }
  });
  // $("input[name='username']").blur(function(){
  //   $.ajax({
  //       type: "post",
  //       url: "data/data.php",
  //       data: {
  //         "username":$(this).val(),
  //       },
  //       dataType: "json",
  //       success: function (data) {
  //         if(data == "true" || data == true){
  //           $.Pop("用户名重复", {
  //               Title: "提示", //标题
  //               Close: true, //是否显示关闭按钮 true(开)/false(关)
  //               Animation: "layerFadeIn", // 默认动画
  //               BoxBg: true, // 是否显示遮罩背景层 true(开)/false(关)
  //               BoxDrag: false, // 是否可以移动弹出层 true(开)/false(关)
  //               BoxBgopacity: 0.6, // 遮罩层的透明度 0-1 0完全透明1完全黑暗
  //               ZIndex: 99999, // 弹出层的cssz-index属性
  //               Class: false, // 是否叠加css样式
  //               Btn: {} // 按钮
  //             })
  //         }
  //       },
  //       error(){

  //       }
  //   })
  // })
  // 获取验证码
  $(".getCode").click(function(){
    $.ajax({
        type: "get",
        url: "data/data.php",
        data: {},
        dataType: "json",
        success: function (data) {
            
        },
        error(){

        }
    })
  })
  // 
  function check(){
    if( $("input[name='username']").val() == ""){
      alert(1)
      return false;
    }
    if($("input[name='password']").val() == ""){
      alert(2)
      return false;
    }
    if($("input[name='confirmPassword']").val() == ""){
      alert(3)
      return false;
    }
    if($("input[name='phone']").val() == ""){
      alert(4)
      return false;
    }
    if($("input[name='code']").val() == ""){
      alert(5)
      return false;
    }
      $.ajax({
        type: "post",
        url: "data/data.php",
        data: {
          "username":$("input[name='username']").val(),
          "password":$("input[name='password']").val(),
          "phone":$("input[name='phone']").val(),
          "code":$("input[name='code']").val()
        },
        dataType: "json",
        success: function (data) {
         
        },
        error:function(){
             // $.Pop("用户名重复", {
            //     Title: "提示", //标题
            //     Close: true, //是否显示关闭按钮 true(开)/false(关)
            //     Animation: "layerFadeIn", // 默认动画
            //     BoxBg: true, // 是否显示遮罩背景层 true(开)/false(关)
            //     BoxDrag: false, // 是否可以移动弹出层 true(开)/false(关)
            //     BoxBgopacity: 0.6, // 遮罩层的透明度 0-1 0完全透明1完全黑暗
            //     ZIndex: 99999, // 弹出层的cssz-index属性
            //     Class: false, // 是否叠加css样式
            //     Btn: {} // 按钮
            //   })
        }
    })
  }
</script>
</html>